<template>
  <div class="about">
   <Row>
        <Col span="6">
         <div class="left-title">
             <div class="title-name">
               <div class="name-text">会议成员(2/6)</div>
             </div>
             <div class="title-content">
                 <div class="content-desc"  v-for="(item, index) in list" :key="index" @click="select(item)">
                   <div class="desc-ava">
                     <Avatar :src="item.ava" />
                   </div>
                   <div class="desc-box">
                      <div class="desc-name">{{item.name}}</div>
                      <div class="desc-group">{{item.group}}</div>
                   </div>
                 </div>
             </div>
         </div>
         <div class="left-box">
             <div class="title-name">
               <div class="name-text">检修信息</div>
             </div>
             <!-- <Scroll> -->
              <div class="box-content">
               <div class="eqtName">
                 <div class="eqtName-left">检修设备:</div>
                 <div class="eqtName-right">
                   <div>{{selectList.eqtName}}</div>
                   <div class="img">
                     <img :src="selectList.eqtAva"/>
                   </div>
                 </div>
               </div>
               <div class="eqtName">
                 <div class="eqtName-left">检修主题:</div>
                 <div class="eqtName-right">
                   <div>{{selectList.equTitle}}</div>
                 </div>
               </div>
               <div class="eqtName">
                 <div class="eqtName-left">故障原因:</div>
                 <div class="eqtName-right">
                   <div>{{selectList.equReason}}</div>
                 </div>
               </div>
               <div class="eqtName">
                 <div class="eqtName-left">解决方案:</div>
                 <div class="eqtName-right">
                   <div>{{selectList.equResolvent}}</div>
                 </div>
               </div>
                <div class="eqtName">
                 <div class="eqtName-left">是否紧急:</div>
                 <div class="eqtName-right ">
                   <div :class="{'stute':!selectList.equStaue}">{{selectList.equStaue?'是':'否'}}</div>
                 </div>
               </div>
             </div>
             <!-- </Scroll> -->
         </div>
        </Col>
        <Col span="12">
          <div class="center-vedio">
             <div class="center-icon">
               <div class="icon"><Icon type="md-bowtie" />麦克风</div>
               <div class="icon"><Icon type="md-bowtie" />麦克风</div>
               <div class="icon"><Icon type="md-bowtie" />麦克风</div>
               <div class="icon"><Icon type="md-bowtie" />麦克风</div>
               <div class="icon"><Icon type="md-bowtie" />麦克风</div>
               <div class="icon"><Icon type="md-bowtie" />麦克风</div>
             </div>
          </div>
          <div class="center-text">
             <div class="message-box">
               <div class="meassge-item">
                  <div class="talk_show" id="words">
                    <div  v-for="(i , index) in list1" :key="index" :class="[(i.person=='A')?'atalk':'btalk']">
                      <Avatar v-if="i.person=='A'" icon="ios-person" size="large" />
                      <div v-if="i.person=='A'" class="atalk-box">
                         <span>{{i.person}} <Time :time="i.time2" type="date" /></span>
                         <div class="atalk-item">
                           {{i.say}}
                         </div>
                      </div>
                      <div v-if="i.person=='B'" class="btalk-box">
                         <span><Time :time="i.time2" type="date" />  {{i.person}} </span>
                         <br>
                         <div class="btalk-item" v-if="i.file">
                           {{i.file}}
                           <br>
                           110KB
                           <Progress  :percent="65" status="active" stroke-color="#59ba73" :stroke-width="7"/>
                         </div>
                         <div class="btalk-item" v-else-if="i.img">
                            <viewer :images="i.img">
                              <img v-for="(src,index) in i.img" :src="src" :key="index" >
                            </viewer>
                            <Progress :percent="65" status="active" stroke-color="#59ba73" :stroke-width="7"/>
                         </div>
                          <div class="btalk-item" v-else>
                            {{i.say}}
                         </div>
                      </div>
                      <Avatar v-if="i.person=='B'" class="Avatar" icon="ios-person" size="large" />
                    </div>
                  </div>
               </div>
             </div>
             <div class="talk_input">
                <Input type="text" class="talk_word" id="talkwords" v-model="text1" placeholder="请输入内容" style="width: 83%" />
                <!-- 绑定单击监听,把value传到vue的list中 -->
                <Button   class="talk_sub"  @click="fnAdd" >发送</Button >
              </div>
          </div>
        </Col>
        <Col span="6">
          <div class="title-name">
            <div class="name-text">检修步骤</div>
          </div>
          <div class="right-box">
            <div class="box">
                <div class="box-item">
                  <div class="item-desc">
                    <div class="desc">步骤描述 </div>
                    <div class="item-desc-item"><span>有可能是气压使用时间过长，导致橡皮出现列横，出现漏气</span> </div>
                  </div>
                  <div class="item-know">
                    <div class="konw-title">知识库</div>
                    <div class="know-file">
                      <div class="file-item">
                        <div class="file-img file-pdf">
                           <a  target="_blank" href="http://cdn1.kybimg.com/ohr/2018/12/23/133833_5c1f1f591850d.pdf"/>
                        </div>
                        <div class="file-name">JavaScript语言精粹JavaScript语言精粹JavaScript语言精粹</div>
                        <!-- <iframe class="file-name" src="../assets/file/test.pdf" width="100%" height="100%" border="0">
                        </iframe> -->
                      </div>
                      <div class="file-item">
                        <div class="file-img file-word" @click="handleEdit"></div>
                        <div class="file-name">JavaScript语言精粹JavaScript语言精粹JavaScript语言精粹</div>
                      </div>
                      <div class="file-item">
                        <div class="file-img file-video" @click="modal1 = true"><Icon type="md-arrow-dropright-circle" /></div>
                        <div class="file-name">JavaScript语言精粹</div>
                        <Modal
                            v-model="modal1"
                            ok-text="关闭"
                            cancel-text=""
                            @on-ok="ok"
                            :closable="false"
                            :mask-closable="false">
                           <video-player
                              class="video-player vjs-custom-skin"
                              ref="videoPlayer"
                              :playsinline="true"
                              @pause="onPlayerPause($event)"
                              :options="playerOptions"
                            > </video-player>
                        </Modal>
                      </div>
                      <div class="file-item">
                        <div class="file-img img">
                           <viewer :images="img">
                              <img v-for="(src,index) in img" :src="src" :key="index" >
                            </viewer>
                        </div>
                        <div class="file-name">JavaScript语言精粹</div>
                      </div>
                      <div class="file-item">
                        <div class="file-img file-excl" @click="exportFiles" ></div>
                        <div class="file-name">JavaScript语言精粹</div>
                      </div>
                      <!-- <div class="file-item">
                        <div class="file-img"></div>
                        <div class="file-name">JavaScript语言精粹</div>
                      </div> -->
                    </div>
                  </div>
                  <div class="set_Boutton">
                    <Button type="primary" class="subimt">通过</Button>
                    <Button type="warning" class="back">驳回</Button>
                  </div>
                  <div class="set-index">1</div>
                </div>
                <div class="link">
                  <div class="link-1"></div>
                  <div class="link-2"></div>
                  <div class="link-3"></div>
                </div>
                <div class="box-item box-item2">
                  <div class="item-desc">
                    <div class="desc">步骤描述 </div>
                    <div class="item-desc-item"><span>有可能是气压使用时间过长，导致橡皮出现列横，出现漏气</span> </div>
                  </div>
                  <div class="item-know">
                    <div class="konw-title">知识库</div>
                    <div class="know-file">
                      <div class="file-item">
                        <div class="file-img"></div>
                        <div class="file-name">JavaScript语言精粹</div>
                      </div>
                      <div class="file-item">
                        <div class="file-img"></div>
                        <div class="file-name">JavaScript语言精粹JavaScript语言精粹JavaScript语言精粹</div>
                      </div>
                      <div class="file-item">
                        <div class="file-img"></div>
                        <div class="file-name">JavaScript语言精粹</div>
                      </div>
                      <div class="file-item">
                        <div class="file-img"></div>
                        <div class="file-name">JavaScript语言精粹</div>
                      </div>
                      <div class="file-item">
                        <div class="file-img"></div>
                        <div class="file-name">JavaScript语言精粹</div>
                      </div>
                      <div class="file-item">
                        <div class="file-img"></div>
                        <div class="file-name">JavaScript语言精粹</div>
                      </div>
                    </div>
                  </div>
                  <div class="set_Boutton">
                    <Button type="primary" class="subimt">通过</Button>
                    <Button type="warning" class="back">驳回</Button>
                  </div>
                  <div class="set-index set-index2">2</div>
                </div>
                <div class="link">
                  <div class="link-1"></div>
                  <div class="link-2"></div>
                  <div class="link-3"></div>
                </div>
                <div class="box-item box-item3">
                  <div class="item-desc">
                    <div class="desc">步骤描述 </div>
                    <div class="item-desc-item"><span>有可能是气压使用时间过长，导致橡皮出现列横，出现漏气</span> </div>
                  </div>
                  <div class="item-know">
                    <div class="konw-title">知识库</div>
                    <div class="know-file">
                      <div class="file-item">
                        <div class="file-img"></div>
                        <div class="file-name">JavaScript语言精粹</div>
                      </div>
                      <div class="file-item">
                        <div class="file-img"></div>
                        <div class="file-name">JavaScript语言精粹JavaScript语言精粹JavaScript语言精粹</div>
                      </div>
                      <div class="file-item">
                        <div class="file-img"></div>
                        <div class="file-name">JavaScript语言精粹</div>
                      </div>
                      <div class="file-item">
                        <div class="file-img"></div>
                        <div class="file-name">JavaScript语言精粹</div>
                      </div>
                      <div class="file-item">
                        <div class="file-img"></div>
                        <div class="file-name">JavaScript语言精粹</div>
                      </div>
                      <div class="file-item">
                        <div class="file-img"></div>
                        <div class="file-name">JavaScript语言精粹</div>
                      </div>
                    </div>
                  </div>
                  <div class="set_Boutton">
                    <Button type="primary" class="subimt">通过</Button>
                    <Button type="warning" class="back">驳回</Button>
                  </div>
                  <div class="set-index set-index3">3</div>
                </div>
            </div>
            <!-- <div class="box-item box-item3">
              <div class="item-desc">
                 <div class="desc">步骤描述 </div>
                 <div class="item-desc-item"><span>有可能是气压使用时间过长，导致橡皮出现列横，出现漏气</span> </div>
              </div>
              <div class="item-know">
                <div class="konw-title">知识库</div>
                <div class="know-file">
                  <div class="file-item">
                    <div class="file-img"></div>
                    <div class="file-name">JavaScript语言精粹</div>
                  </div>
                   <div class="file-item">
                    <div class="file-img"></div>
                    <div class="file-name">JavaScript语言精粹JavaScript语言精粹JavaScript语言精粹</div>
                  </div>
                  <div class="file-item">
                    <div class="file-img"></div>
                    <div class="file-name">JavaScript语言精粹</div>
                  </div>
                  <div class="file-item">
                    <div class="file-img"></div>
                    <div class="file-name">JavaScript语言精粹</div>
                  </div>
                  <div class="file-item">
                    <div class="file-img"></div>
                    <div class="file-name">JavaScript语言精粹</div>
                  </div>
                  <div class="file-item">
                    <div class="file-img"></div>
                    <div class="file-name">JavaScript语言精粹</div>
                  </div>
                </div>
              </div>
              <div class="set_Boutton">
                <div class="subimt">通过</div>
                <div class="back">驳回</div>
              </div>
              <div class="set-index set-index3">3</div>
            </div> -->
          </div>
        </Col>
    </Row>
  </div>
</template>
<script>
import XLSX from 'xlsx'
export default {
  data () {
    return {
      list: [{
        id: 1,
        name: '杰瑞1',
        ava: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        group: '技术组1',
        eqtName: 'BabaAXX600 低压进线柜子',
        eqtAva: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        equTitle: 'BabaAXX600 AA1 气压阀过低问题',
        equReason: '有可能是气压使用时间过长，导致橡皮出现列横，出现漏气有可能是气压使用时间过长',
        equResolvent: '更换全新气压橡皮胶套',
        equStaue: 1
      }, {
        id: 1,
        name: '杰瑞2',
        ava: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        group: '技术组2',
        eqtName: 'BabaAXX600 低压进线柜子',
        eqtAva: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        equTitle: 'BabaAXX600 AA1 气压阀过低问题',
        equReason: '有可能是气压使用时间过长，导致橡皮出现列横，出现漏气',
        equResolvent: '更换全新气压橡皮胶套',
        equStaue: 0
      }, {
        id: 1,
        name: '杰瑞2',
        ava: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        group: '技术组2',
        eqtName: 'BabaAXX600 低压进线柜子',
        eqtAva: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        equTitle: 'BabaAXX600 AA1 气压阀过低问题',
        equReason: '有可能是气压使用时间过长，导致橡皮出现列横，出现漏气',
        equResolvent: '更换全新气压橡皮胶套',
        equStaue: 0
      }, {
        id: 1,
        name: '杰瑞2',
        ava: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        group: '技术组2',
        eqtName: 'BabaAXX600 低压进线柜子',
        eqtAva: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        equTitle: 'BabaAXX600 AA1 气压阀过低问题',
        equReason: '有可能是气压使用时间过长，导致橡皮出现列横，出现漏气',
        equResolvent: '更换全新气压橡皮胶套',
        equStaue: 0
      }, {
        id: 1,
        name: '杰瑞3',
        ava: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        group: '技术组3',
        eqtName: 'BabaAXX600 低压进线柜子',
        eqtAva: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        equTitle: 'BabaAXX600 AA1 气压阀过低问题',
        equReason: '有可能是气压使用时间过长，导致橡皮出现列横，出现漏气',
        equResolvent: '更换全新气压橡皮胶套',
        equStaue: 0
      }, {
        id: 1,
        name: '杰瑞4',
        ava: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        group: '技术组4',
        eqtName: 'BabaAXX600 低压进线柜子',
        eqtAva: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        equTitle: 'BabaAXX600 AA1 气压阀过低问题',
        equReason: '有可能是气压使用时间过长，导致橡皮出现列横，出现漏气',
        equResolvent: '更换全新气压橡皮胶套',
        equStaue: 1
      }, {
        id: 1,
        name: '杰瑞5',
        ava: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        group: '技术组5',
        eqtName: 'BabaAXX600 低压进线柜子',
        eqtAva: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        equTitle: 'BabaAXX600 AA1 气压阀过低问题',
        equReason: '有可能是气压使用时间过长，导致橡皮出现列横，出现漏气',
        equResolvent: '更换全新气压橡皮胶套',
        equStaue: 1
      }],
      selectList: [],
      split2: 0.5,
      list1: [
        { person: 'B', time2: (new Date()).getTime() - 86400 * 3 * 1000, say: '吃饭了吗？', img: ['https://i.loli.net/2017/08/21/599a521472424.jpg'] },
        { person: 'A', time2: (new Date()).getTime() - 86400 * 3 * 1000, say: '吃饭了吗？' },
        { person: 'B', time2: (new Date()).getTime() - 86400 * 3 * 1000, say: '', file: 'Xcode11后纯代码项目设置.pdf' }
      ],
      sel1: 1,
      text1: '',
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 倍速控制
        autoplay: false, // 是否自动播放
        muted: false, // 是否静音播放
        loop: false, // 是否循环播放
        preload: 'auto',
        language: 'zh-CN',
        aspectRatio: '16:9', // 比例
        fluid: true,
        sources: [
          {
            type: '',
            src:
             'https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4' // url地址
          }
        ],
        poster: 'https://i.loli.net/2017/08/21/599a521472424.jpg', // 你的封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true, // 剩余时间是否显示
          remainingTimeDisplay: true, // 剩余时间是否显示，有一个即可
          fullscreenToggle: true// 全屏按钮
        }
      },
      modal1: false,
      img: ['https://i.loli.net/2017/08/21/599a521472424.jpg'],
      excle: [],
      yuming: 'https://files.shimonote.com/shimo-export/4uuFj9WYnyFqbDGC.docx?auth_key=1628504853-2w2d0xi13EvRs3VK-0-6c2bf6c5683227618c6ba90e7f1373e7&response-content-disposition=attachment%3B+filename%3D%22%25E4%25B8%2580%25E5%2588%2586%25E9%2592%259F%25EF%25BC%258C%25E4%25BA%2586%25E8%25A7%25A3%25E7%259F%25B3%25E5%25A2%25A8%25E6%2596%2587%25E6%25A1%25A3%2520.docx%22%3B+filename%2A%3DUTF-8%27%27%25E4%25B8%2580%25E5%2588%2586%25E9%2592%259F%25EF%25BC%258C%25E4%25BA%2586%25E8%25A7%25A3%25E7%259F%25B3%25E5%25A2%25A8%25E6%2596%2587%25E6%25A1%25A3%2520.docx'
    }
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  created () {
    this.selectList = this.list[0]
  },
  methods: {
    select (item) {
      this.selectList = item
    },
    fnAdd () {
      if (this.text1 == '') {
        alert('请输入内容!')
        return
      }
      // 列表追加数据push()
      this.list1.push({ person: (this.sel1 == 0) ? 'A' : 'B', say: this.text1, time2: (new Date()).getTime() - 86400 * 3 * 1000 })
      // 每次输入内容后,清空输入栏数据
      this.text1 = ''
    },
    onPlayerPause (player) {
      this.isPlay = false
    },
    ok () {
      this.player.pause()
    },
    exportFile () {
      const ws = XLSX.utils.aoa_to_sheet(this.excle)
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, 'SheetJS')
      XLSX.writeFile(wb, '下载.xlsx')
    },
    exportFiles () {
      const keys = [
        '序号',
        '姓名',
        '头像',
        '技术组',
        '设备名字',
        '设备图',
        '检修主题',
        '故障原因'
      ]
      this.excle.push(keys)
      this.list.forEach((art) => {
        this.excle.push(Object.values(art))
      })
      this.exportFile()
    },
    handleEdit () {
      if (!/\.(pdf|PDF)$/.test(this.yuming)) {
        // 不是pdf格式
        window.open(
          'https://view.officeapps.live.com/op/view.aspx?src=' + this.yuming,
          '_blank'
        )
        return false
      } else {
        // pdf 格式
        // const url = this.yuming + '/anli?id=' + row.id
        // this.viewVisible = true
        // this.pdfsrc = url
      }
    }
  }
}
</script>
<style lang="less">
@import "../assets/style/about/index";
</style>
<style >
  /* ::v-deep .ivu-card-body{
    padding: 0;
 } */
</style>
